<template>
  <div class="container">
    <van-tabs color="#0077FF" v-model="active" @click="onClickTab">
      <van-tab title="隐患提交">
        <div class="taskList">
          <div v-if="problemList.length == 0">
            <van-empty description="暂无数据" />
          </div>
          <div
            class="taskItem"
            v-for="item in problemList"
            :key="item.id"
            @click="goDetail(item)"
          >
            <div class="taskStatus" v-if="item.changeStatus == 1">
              {{ item.changeStatusName }}
            </div>
            <div class="taskStatus greenColor" v-if="item.changeStatus == 2">
              {{ item.changeStatusName }}
            </div>
            <div class="taskLeft">
              <img :src="item.dangerImg1" alt="" />
            </div>
            <div class="taskRight">
              <div class="taskTitle">{{ item.dangerName }}</div>
              <div class="taskSubTitle">
                {{ item.dangerDescribe }}
              </div>
              <div class="taskLabel">
                <div class="taskLabelItem">{{ item.dangerGradeName }}</div>
                <div class="taskLabelItem">{{ item.governKindName }}</div>
              </div>
              <div class="taskDate">登记时间:{{ item.createdTime }}</div>
            </div>
          </div>
        </div></van-tab
      >
      <van-tab title="作业提交">
        <van-dropdown-menu active-color="#1989fa">
          <van-dropdown-item
            @change="dropDown"
            v-model="value1"
            :options="option1"
          />
        </van-dropdown-menu>
        <div class="submitList">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div
              class="submitItem"
              v-for="item in listData"
              :key="item.id"
              @click="goDetail2(item)"
            >
              <div class="typeTitle">
                <div class="left">{{ item.ticketTypeCodeName }}</div>
                <div class="right">{{ item.nodeName }}</div>
              </div>
              <div class="msgBox">
                <div class="msgItem">
                  <div class="left">作业票编号:</div>
                  <div class="right">{{ item.ticketNo }}</div>
                </div>
                <div class="msgItem">
                  <div class="left">开始时间:</div>
                  <div class="right">{{ item.startTime }}</div>
                </div>
                <div class="msgItem">
                  <div class="left">结束时间:</div>
                  <div class="right">{{ item.endTime }}</div>
                </div>
                <div class="msgItem">
                  <div class="left">状态:</div>
                  <div class="right2">{{ item.statusName }}</div>
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
    <tabbar :activeIndex.sync="nowActive"></tabbar>
  </div>
</template>

<script>
import {
  getSubmitterLogApi,
  workTypeApi,
  homePageApi,
  pageSubmitApi,
} from '@/api/ticket'
import tabbar from '@/components/tabbar'
export default {
  name: 'MySubmitIndex',
  props: {},
  components: {
    tabbar,
  },
  data() {
    return {
      nowActive: 1,
      active: 0,
      value1: '',
      option1: [{ text: '所有作业票', value: '' }],
      loading: false,
      finished: false,
      listData: [],
      config: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      isLoginMsg: {},
      problemList: [],
      toNum: '',
      upCode: '所有作业票',
    }
  },

  mounted() {},
  created() {
    this.isLoginMsg = JSON.parse(sessionStorage.getItem('loginInfo'))
    this.active = +this.$route.query.activeIndex
    if (this.active == 1) {
      this.pageSubmitApiGet()
    }
    this.workTypeApiGet()
    this.getHomePageData()
  },
  methods: {
    onClickTab(e) {
      if (e == 0) {
        this.getHomePageData()
      } else if (e == 1) {
        this.pageSubmitApiGet()
      }
    },
    async workTypeApiGet() {
      const res = await workTypeApi()
      this.option1 = [{ text: '所有作业票', value: '' }].concat(
        res.data.map((item) => ({
          text: item.name,
          value: item.code,
        }))
      )
    },
    dropDown(e) {
      this.upCode = e
      this.pageSubmitApiGet()
    },
    goDetail2(item) {
      this.$router.push({
        path: '/donghuoSubmit',
        query: {
          id: item.id,
          code: item.ticketTypeCode,
          codeName: item.ticketTypeCodeName,
        },
      })
    },
    goDetail(item) {
      this.$router.push({
        path: '/problemDetail',
        query: {
          id: item.id,
        },
      })
    },
    async getSubmitterLog() {
      const findItem = this.option1.find((item) => item.value === this.value1)
      this.upCode = findItem ? findItem.text : null

      const formData = {
        id: this.isLoginMsg.userId,
        // page: this.config.page,
        // pageSize: this.config.pageSize,
        printingJobType: this.upCode == '所有作业票' ? '' : this.upCode,
      }
      const res = await getSubmitterLogApi(formData)
      this.listData = res.data

      // // 如果正在加载或已加载完成，则返回
      // if (this.loading || this.finished) return
      // this.loading = true
      // try {
      //   const formData = {
      //     id: 1,
      //     page: this.config.page,
      //     pageSize: this.config.pageSize,
      //   }
      //   const res = await getSubmitterLogApi(formData)
      //   if (res.code === 0) {
      //     const data = res.data || []
      //     // 如果是第一页，直接替换数据
      //     if (this.config.page === 1) {
      //       this.listData = data
      //     } else {
      //       // 否则追加数据
      //       this.listData = [...this.listData, ...data]
      //     }
      //     // 判断是否还有更多数据
      //     if (data.length < this.config.pageSize) {
      this.finished = true
      //     } else {
      //       this.config.page++
      //     }
      //   }
      // } catch (error) {
      //   console.error('加载数据失败:', error)
      // } finally {
      //   this.loading = false
      // }
    },
    async pageSubmitApiGet() {
      const formData = {
        // id: this.isLoginMsg.userId,
        pageNo: this.config.page,
        pageSize: this.config.pageSize,
        ticketTypeCode: this.upCode == '所有作业票' ? '' : this.upCode,
      }
      const res = await pageSubmitApi(formData)
      this.listData = res.data.records

      this.finished = true
    },
    //隐患
    async getHomePageData() {
      const res = await homePageApi({
        id: JSON.parse(sessionStorage.getItem('loginInfo')).userId,
      })
      this.problemList = res.data.envirHiddenDangerList
      // this.toNum = res.data.num
      // console.log(res)
    },
    onLoad() {
      // this.getSubmitterLog()
    },
  },

  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  background: #f5f6f7;
}
.submitList {
  padding: 12px 16px;
  padding-bottom: 80px;
  background: #f5f6f7;
  .submitItem {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 16px;

    .typeTitle {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px solid #dbe0e7;
      .left {
        font-weight: bold;
      }
      .right {
        color: #525459;
      }
    }
    .msgBox {
      padding: 10px;
      font-size: 12px;
      .msgItem {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #dbe0e7;
        color: #525459;
        .right2 {
          color: #0077ff;
        }
      }
      .msgItem:last-child {
        border: none;
        padding-bottom: 0;
      }
    }
  }
}
.taskList {
  padding: 15px;
  .taskItem {
    height: 108px;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 12px;
    position: relative;
    margin-bottom: 12px;
    .taskStatus {
      position: absolute;
      right: 0;
      top: 0;
      background-color: #00b9c7;
      width: 52px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #fff;
      border-radius: 0 8px 0 8px;
      font-size: 12px;
    }
    .greenColor {
      background-color: #00b66e;
      color: #fff;
    }
    .taskLeft {
      img {
        width: 80px;
        height: 80px;
      }
    }
    .taskRight {
      margin-left: 10px;
      .taskTitle {
        font-size: 14px;
        font-weight: bold;
        color: #3a3d3c;
      }
      .taskSubTitle {
        font-size: 10px;
        font-weight: bold;
        color: #616463;
        margin: 6px 0;
      }
      .taskLabel {
        display: flex;
        margin-bottom: 8px;
        .taskLabelItem {
          width: 48px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          background-color: #f1f5f3;
          font-size: 10px;
          margin-right: 10px;
        }
      }
      .taskDate {
        font-size: 10px;
        font-weight: bold;
        color: #939c98;
      }
    }
  }
}
</style>
